<template>
  <div class="demo">
    <button @click="routeLing">显示路线</button>
    <div id="container"></div>
    <div id="panel"></div>
  </div>
</template>

<script>
export default {
  name: 'Demo',
  data() {
    return {
      aMap: '',//高德地图实例
      locationMsg: {},
      origin:'未来科学城',//起点
      destination:'沙河地铁站',//终点
    }
  },
  mounted() {
    this.initMap();
  },
  methods: {
    //显示定位
    initMap() {
      this.aMap = new AMap.Map('container',);
      var map = this.aMap;
      map.plugin('AMap.Geolocation', function () {
        var geolocation = new AMap.Geolocation({
          enableHighAccuracy: true,// 是否使用高精度定位，默认：true
          timeout: 10000,// 设置定位超时时间，默认：无穷大
          convert: true,//自动偏移坐标，偏移后的坐标为高德坐标，默认true
          showButton: true,//显示定位，默认：true
          buttonOffset: new AMap.Pixel(10, 20),// 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
          showMarker: true,//定位成功后在定位到的位置显示标记，默认true
          showCircle: true,//定位成功后用圆圈表示定位精度范围，默认true
          panToLoCation: true,//定位成功后将定位到的位置作为地图中心点，默认true
          zoomToAccuracy: true,//  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          buttonPosition: 'RB'//  定位按钮的排放位置,  RB表示右下
        })

        map.addControl(geolocation);
        geolocation.getCurrentPosition()//获取当前的位置
        self.aMap.event.addListener(geolocation, 'complete', res => {
          this.locationMsg.addressComponent = res.addressComponent;
          this.locationMsg.formattedAddress = res.formattedAddress;
        });//返回定位信息
        AMap.event.addListener(geolocation, 'error', err => console.log(err));//返回定位出错信息
      })
    },
    //路线规划
    routeLing() {
      var self = this;
      this.aMap.plugin('AMap.Driving', function () {
        var driving = new AMap.Driving({
          // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
          policy: AMap.DrivingPolicy.LEAST_TIME,
          //map 指定将路线规划方案绘制对应的AMap.Map对象上
          map: self.aMap,
          //panel 指定将结构化的路线详情数据显示的对应的DOM上，传入值需是DOM的ID
          panel:'panel',
        })
        console.log(self.locationMsg);
        var points = [
          {keyword: self.origin, city: '北京'},
          {keyword: self.destination, city: '北京'}
        ]
        driving.search(points, function (status, result) {
          // 未出错时，result即是对应的路线规划方案
          console.log(status,result);
        })
      })
    }
  },
}
</script>
<style>
#container {width: 400px;height: 400px;margin: 0 auto}
</style>

